<html>
<head>

<script language="Javascript" src="../gamelib/gamelib_core.js"></script>
<script language="Javascript" src="../gamelib/gamelib_sprites.js"></script>
<script language="Javascript" src="../gamelib/gamelib_keyboard.js"></script>

<script language="Javascript">

var ball=null;			// this will be my ball sprite
var bat1=null;			// this will be player's bat
var bat2=null;			// this will be CPU's bat

var upkey=null;			// this will trap the "UP" cursor key
var downkey=null;		// this will trap the "DOWN" cursor key

Gl_preloader("../images/whiteblock.gif");	// preload image to cache. Not really necessary here...

function init(){
	upkey=Kb_trapkey("UP");				// use cursor up for up
	downkey=Kb_trapkey("DOWN");			// and cursor down for down

	Sp_xoffset=100;					// all sprites relative to position
	Sp_yoffset=150;					// 100,150 on screen

	ball=new Sp_Sprite();			// make a ball
	bat1=new Sp_Sprite();			// bat for player
	bat2=new Sp_Sprite();			// and bat for CPU

	ball.setImage("../images/whiteblock.gif",32,32,1,1);// make ball a square block
	bat1.setImage("../images/whiteblock.gif",16,64,1,1);// make player bat a rectangular block
	bat2.setImage("../images/whiteblock.gif",16,64,1,1);// make CPU bat a rectangular block

	ball.setFrame(0);	// each sprite here only has one frame. But we must set the frame
	bat1.setFrame(0);	// for sprite to become visible...
	bat2.setFrame(0);

	ball.moveTo(100,100);				// set position of ball
	bat1.moveTo(0,100);				// set position of player
	bat2.moveTo(300,100);				// set position of CPU

	ball.setXlimits(0,330);				// set the ball's x limits,
	bat1.setXlimits(0,0);				// set the player's x limits,
	bat2.setXlimits(300,316);			// set the CPU's x limits,

	ball.setYlimits(10,250);			// set the ball's x limits,
	bat1.setYlimits(0,300);				// set the player's x limits,
	bat2.setYlimits(0,300);				// set the CPU's x limits,

	ball.setDir(1,1);				// ball's initial direction
	ball.setSpeed(10);				// ball's speed set to 10
	bat1.setSpeed(6);				// player's bat speed set to 6
	bat2.setSpeed(6);				// CPU's bat speed set to 6

	ball.collides=true;				// ball registers collisions (faster than having both bats register collisions)
	ball.bounces=true;				// ball bounces

	ball.switchOn();				// switch on the ball
	bat1.switchOn();				// switch on the player bat
	bat2.switchOn();				// switch on the CPU bat

	Gl_hook("gameloop()");			// hook in the function gameloop()
	Gl_start();					// and start the engine!
}

function gameloop(){
	if(ball.hit==bat1){				// see if ball has hit player bat
		var dist=ball.y-bat1.y;			// work out distance from top of bat
		if(dist<0) dist=0;			// clip
		else if(dist>60) dist=60;		// clip
		ball.setXYdegs((dist*2)+30)		// set ball direction according to where it hit the bat
	}else if(ball.hit==bat2){			// as above
		var dist=ball.y-bat2.y;
		if(dist<0) dist=0;
		else if(dist>60) dist=60;
		ball.setXYdegs(330-(dist*2))
	}else if(ball.x+ball.width-8>bat2.x||ball.x<bat1.x+bat1.width-8) ball.x=100; // if ball out of play, reset it

	if(downkey.pressed)
		bat1.setDir(0,1);		// move player bat according to
	else if(upkey.pressed)
		bat1.setDir(0,-1);	// whether s/he has pressed q or a
	else if(bat1.ydir!=0)
		bat1.setDir(0,0);		// if neither, set player bat's direction to 0,0 (stopped)

	if((ball.xdir>0)&&(ball.y>bat2.y+38)) bat2.setDir(0,1);		// move CPU's bat
	if((ball.xdir>0)&&(ball.y<bat2.y+26)) bat2.setDir(0,-1);	// to try and hit ball
}

</script>
</head>
<body bgcolor="#000000" onload="init()">
<font color="#ffbb00" face="Arial" size=3>
<u>Keyboard library example 1</u><br><br>
<font size=2>
Move your bat to stop the ball leaving the screen...<br><br>
IE users, use cursor keys "UP" and "DOWN" to move up and down!<br>
Netscape users, use keys "I" and "K" to move up and down!
</font>
</font>
</body>
</html>